<template>
    <div class="show-pc">
        <div class="works_container">
            <div class="works_item" v-for="(item, index) in myConcernList">
                <div class="content_left">
                    <div>
                        <sshbImage :width="100" :height="100" :src="item.avatar"
                            style="border-radius: 0.2vw; border-radius: 50%;"></sshbImage>
                    </div>
                    <div class="userName">{{ item.realname }}</div>
                    <div class="userText">
                        <span>{{ item.deptName }}</span>

                    </div>
                    <div class="button" @click="unfollowBtn(item, '2')" v-if="item.isConcern === '1'">
                        取关
                    </div>
                    <div class="button" @click="unfollowBtn(item, '1')" v-if="item.isConcern === '2'">
                        关注
                    </div>
                    <div class="button" @click="unfollowBtn(item, '2')" v-if="item.isConcern === '3'">
                        互注
                    </div>
                </div>
                <div class="content_right">
                    <div class="worksimg" v-for="item in item.list" :key="item" @click="handleTOdetails(item)">
                        <sshbImage :width="360" :height="260" :src="item.imageList[0].imgAbridgePath"
                            style="border-radius: 10px;  ">
                        </sshbImage>
                    </div>

                </div>
                <div class="more_btn" @click="lookMore(item)">
                    <div class="text_btn">查看更多</div>
                </div>
            </div>

            
            <!-- 加载动画 -->
            <div v-if="loading" class="loading-container">
                <a-spin size="large" class="custom-spin" />
            </div>
            <!-- 触发懒加载的占位元素 -->
            <div v-else ref="myElement"></div>

            <div style="height: 50px"></div>
            <!-- 空数据提示 -->
            <div>
                <template v-if="(myConcernList.length === 0 && !loading) || !isMove">
                    <a-empty description="我也是有底线的" style="color: var(--color-text);" />
                </template>
            </div>
        </div>


    </div>
    <!-- 移动端 -->
    <div class="show-wap">
        <div class="works_container-wap">
            <div class="works_item-wap" v-for="(item, index) in myConcernList">
                <div class="content_left-wap">
                    <div>
                        <sshbImage :width="300" :height="300" :src="item.avatar"
                            style="border-radius: 4px; border-radius: 50%;"></sshbImage>
                    </div>
                    <div style="width: 100%; ">

                        <div class="userName-wap">{{ item.realname }}</div>
                        <div class="userText-wap">
                            <div>
                                <span>{{ item.deptName }}</span>
                            </div>
                            <div class="button-wap" @click="unfollowBtn(item, '2')" v-if="item.isConcern === '1'">
                                取关
                            </div>
                            <div class="button-wap" @click="unfollowBtn(item, '1')" v-if="item.isConcern === '2'">
                                关注
                            </div>
                            <div class="button-wap" @click="unfollowBtn(item, '2')" v-if="item.isConcern === '3'">
                                互注
                            </div>
                        </div>

                    </div>

                </div>
                <div class="content_right-wap">

                    <div class="works-container">
                        <div class="worksimg-wap" v-for="item in item.list" :key="item" @click="handleTOdetails(item)">
                            <sshbImage :width="1100" :height="600" :src="item.imageList[0].imgAbridgePath" @click.prevent.stop="handleTOdetails(item)"
                                style="border-radius: 10px;">
                            </sshbImage>
                        </div>
                    </div>

                    <div class="more_btn-wap" @click="lookMore(item)">
                        <div class="text_btn-wap">查看更多</div>
                    </div>
                </div>

            </div>
          <!-- 加载动画 -->
            <div v-if="loading" class="loading-container-wap">
                <a-spin size="large" class="custom-spin" />
            </div>
            <!-- 触发懒加载的占位元素 -->
            <div v-else ref="myElement"></div>

            <div style="height: 50px"></div>
            <!-- 空数据提示 -->
            <div>
                <template v-if="(myConcernList.length === 0 && !loading) || !isMove">
                    <a-empty description="我也是有底线的" style="color: var(--color-text);" />
                </template>
            </div>
        </div>
    </div>

</template>

<script setup>
import sshbImage from '@/sshbComponents/sshbImage/index.vue';
import { useHttp } from '@/api/http'
import { useRouter } from 'vue-router'
import { getUserId } from '@/utils/token'
import { watch, onMounted, ref } from 'vue'
import { useStore } from '@/store'
const { themeStore } = useStore()


const router = useRouter()
const loading = ref(false)
const isMove = ref(true)
const queryParams = ref({
    pageNo: 1,
    pageSize: 10,
})
const myElement = ref(null)



// 我的关注
const myConcernList = ref([])
const getConcernList = () => {
    if(loading.value || !isMove.value) return
    loading.value = true
    useHttp.get("/web/my/myConcernList",queryParams.value).then(res => {
        myConcernList.value.push(...res.result.records)
        loading.value = false
        if(res.result.records.length < queryParams.value.pageSize) {
            isMove.value = false
        }
    })
}
getConcernList()

// 查看更多
const lookMore = (item) => {
    console.log(item.userId, "更多按钮");
    router.push({
        path: '/listOfWorks/' + item.userId,
    })
}

// 取消关注
const unfollowBtn = (item, status) => {
    console.log(item.isConcern, "关注状态");

    if (status === '2') {
        useHttp.post('/web/relations/unfollow', {
            publicityUserId: getUserId(),
            quiltPublicityUserId: item.userId
        }).then(res => {
            item.isConcern = status
            getCount()
            message.success(res.message)
        })
    } else {
        useHttp.post('/web/relations/add', {
            publicityUserId: getUserId(),
            quiltPublicityUserId: item.userId
        }).then(res => {
              getCount()
            item.isConcern = res.result.isConcern
               message.success(res.result.msg)
        })
    }
}
// 查看详情
const handleTOdetails = (item) => {
    window.open(`${BASEURLTZ}/details/${item.id}`, "_blank ")
}



const handleScroll =() => {
    if (!myElement.value || loading.value || !isMove.value) return

    const rect = myElement.value.getBoundingClientRect()
    const windowHeight = window.innerHeight || document.documentElement.clientHeight

    // 当占位元素进入视口底部一定距离时加载更多
    if (rect.top <= windowHeight + 200) {
        queryParams.value.pageNo += 1
        getConcernList()
    }
}

onMounted(() => {
    window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
})


const heUserIdData = ref({
  heUserId: getUserId()
}); 
const getCount = () => {
  console.log( getUserId());
  
  useHttp.get('/web/my/myCount', heUserIdData).then((res) => {
    console.log(res);
    
    themeStore.userInfoMyCount = res.result


  });
}

</script>

<style lang="less" scoped>
.works_container {
    width: 95.83333333333334vw;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;

    .works_item {
        width: 94vw;
        height: 16vw;
        margin-top: 40px;
        background-color: var(--color-bg-20);
        border-radius: 10px;
        display: flex;
        // gap: 2vw;
        justify-content: space-around;
        align-items: center;




        .content_left {

            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.83vw;

            .userName {
                font-size: var(--text-18);
                color: var(--color-text);
            }

            .userText {
                font-size: 0.72vw;
                color: var(--color-text);

                display: flex;
                gap: 0.52vw;


            }

            .button {
                width: 5.20vw;
                height: 2.08vw;
                text-align: center;
                line-height: 2.08vw;
                background-color: var(--color-btn-b);
                color: var(--color-text-con);
                border-radius: 0.52vw;
                font-size: 0.72vw;
                cursor: pointer;
                transition: background-color 0.3s;

                &:hover {
                    background-color: var(--btn-hover-b);
                }
            }


        }

        .content_right {
            display: flex;
            gap: 1.71vw;
            width:80vw;
        }

        .more_btn {

            width: 3.12vw;
            height: 13.5vw;
            background-color: var(--color-btn-b);



            font-size: 0.93vw;
            border-radius: 0.52vw;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
                background-color: var(--btn-hover-b);
            }

            .text_btn {
                writing-mode: vertical-rl;
                text-orientation: mixed;
                letter-spacing: 5px;
                color: var(--color-text-con);
            }
        }



    }

    .loading-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        width: 100%;
    }
}

// 手机

.works_container-wap {
    width: 100%;
    margin: 0 auto;
    // padding: 0 20px;
    box-sizing: border-box;


    .works_item-wap {
        width: 100%;
        margin-top: 20px;
        background-color: var(--color-bg-20);
        border-radius: 10px;
        padding: 10px;

        .content_left-wap {
            display: flex;
            gap: 16px;
            padding-top: 10px;


            .userName-wap {
                font-size: 18px;
                color: var(--color-text-3);
            }

            .userText-wap {
                width: 100%;
                font-size: 16px;
                color: var(--color-text);
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 20px;


            }

            .userText-wap>div>span {
                margin-right: 4px;
            }

            .button-wap {
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background-color: var(--color-btn-b);
                color: var(--color-text-con);
                border-radius: 6px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s;
                position: relative;
                bottom: 10px;

            }


        }

        .content_right-wap {
            // flex: 1;
            // display: flex;
            // gap: 1.71vw;
            margin-top: 10px;

            .works-container {
                display: flex;
                overflow-x: auto;
                scrollbar-width: none;

                padding: 10px 0;
                width: 100%;
            }

            .works-container::-webkit-scrollbar {
                display: none;

            }

            .worksimg-wap {
                flex: 0 0 auto;

                margin-right: 15px;

            }

            .worksimg-wap:last-child {
                margin-right: 0;

            }

            .more_btn-wap {

                width: 100%;
                height: 50px;
                margin: 0 auto;
                background-color: var(--color-btn-b);
                color: var(--color-text-con);
                font-size: 16px;

                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transition: background-color 0.3s;
                letter-spacing: 4px;
           
            }
        }



    }
    .loading-container-wap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300px;
		width: 100%;
	}
}
</style>